<template>
  <view class="my-content">
   <view class="uni-flex uni-column">
     <!-- 设置按钮 -->
     <view class="setting-btn" @click="showOpenDrawer" v-show="isSetShow">
       <uni-icons type="gear" size="24" color="#fff"></uni-icons>
     </view>
     <!-- 上 -->
      <view class="flex-item flex-item-V my-header">
        <image class="avatar-bg-img" :src="orderForm.bgImage" mode="aspectFill"></image>
        <view class="avatar-main">
          <view>
            <image class="avatar-img" :src="orderForm.avarImage" mode="aspectFill"></image>
            <view class="avatar-title">
              <text class="title-one">{{ orderForm.username }}</text>
              <text> 炭火号：{{ orderForm.userCode }} </text>
              <text> IP属地：{{ orderForm.provinceName }} </text>
            </view>
          </view>
        </view>
        <view class="avatar-info" v-show="isFollowShow">
          <uni-row class="demo-uni-row">
            <uni-col :span="8">
              <p>110</p>
              <p>关注</p>
            </uni-col>
            <uni-col :span="8">
              <p>10000</p>
              <p>粉丝</p>
            </uni-col>
            <uni-col :span="8">
              <p>50000</p>
              <p>获赞与收藏</p>
            </uni-col>
          </uni-row>
        </view>
      </view>
      <!-- 中 -->
      <view class="flex-item flex-item-V my-card">
        <uni-card class="my-card-info" margin="0" :is-shadow="true">
          <uni-segmented-control :current="currentStatus" :values="navList" @clickItem="handleNavChange" styleType="text" activeColor="#EE3F4D">
          </uni-segmented-control>
          <view class="card-content"> 
            <view v-if="currentStatus == 0 || currentStatus == 1 || currentStatus == 2 || currentStatus == 3">
              <!-- ******************** -->
              <!-- 订单状态页 -->
              <view class="card-one">
                <uni-card title="维尚优选旗舰店" extra="额外信息" class="card-list" v-for="(item,index) in shopList" :key="index">
                  <uni-row class="demo-uni-row">
                    <uni-col :span="10">
                    	<view class="part-one">
                        <image src="/static/images/apply-img/办会家_审核通过 (1).png" mode="aspectFit" class="part-one-img"></image>
                      </view>
                    </uni-col>
                    <uni-col :span="14" >
                    	<view class="part-two">
                        <view class="title">  {{item.label}}  </view>
                        <view class="del">
                          <uni-icons type="trash" size="22" v-if="isCartShow"></uni-icons>
                        </view>
                        <view class="price">
                          <span> 实付款：<span class="red-c">  ￥ {{item.oldPrice}} </span> </span>
                        </view>
                      </view>
                    </uni-col>
                  </uni-row>
                  <!-- 待付款 -->
                  <view class="card-two" v-if="isShowOne">
                    <button type="default" size="mini"> 修改地址 </button>
                    <button type="default" size="mini"> 找朋友付 </button>
                    <button class="red-btn" size="mini"> 继续付款 </button>
                  </view>
                  <!-- 待提货 -->
                  <view class="card-two" v-if="isShowTwo">
                    <button type="default" size="mini"> 延长收货 </button>
                    <button type="default" size="mini"> 查看物流 </button>
                    <button class="red-btn" size="mini"> 确认收货 </button>
                  </view>
                  <!-- 已完成 -->
                  <view class="card-two" v-if="isShowThree">
                    <button type="default" size="mini"> 评价 </button>
                    <button type="default" size="mini"> 加入购物车 </button>
                    <button class="red-btn" size="mini"> 再买一单 </button>
                  </view>
                </uni-card>
              </view>
              <!-- ********************* -->
              
            </view>
            <!-- <view v-if="currentStatus == 1">
              <text>bbb</text>
            </view>
            <view v-if="currentStatus == 2">
              <text>ccc</text>
            </view>
            <view v-if="currentStatus == 3">
              <text>dddd</text>
            </view> -->
          </view>
        </uni-card>
      </view>
      <!-- 下 -->
      <!-- <view class="flex-item flex-item-V">C</view> -->
      <!-- 设置-右弹出 -->
      <uni-drawer ref="showRightRef" mode="right" :mask-click="true">
        <scroll-view style="height: 100%; width: 100%;" scroll-y="true">
          <uni-section class="mb-10" title="设置" style="text-align: center;"></uni-section>
          <uni-list v-for="(item,index) in settingData" :key="index">
            <uni-list-item 
              :title="item.title" 
              :link="item.link"
              :to="item.to"
              :extra-icon="item.icons"
              :show-extra-icon="true"
              :show-arrow="true"
              @click="handleClickItem(item)"
            ></uni-list-item>
          </uni-list>
        </scroll-view>
      </uni-drawer>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const props = defineProps({
  isShopPage: {
    type: Boolean,
    default: false
  },
  isMyPage: {
    type: Boolean,
    default: false
  },
  isSetShow: {
    type: Boolean,
    default: false
  },
  isFollowShow: {
    type: Boolean,
    default: false
  },
  navList: {
    type: Array,
    default: ['全部', '待付款', '待提货','已完成']
  },
  isShowOne: {
    type: Boolean,
    default: true
  },
  isShowTwo: {
    type: Boolean,
    default: false
  },
  isShowThree: {
      type: Boolean,
      default: false
    },
})

  const shopList = ref([
    { label: "W-18mmPGA单面胭脂粉（背面暖白）E0", prop: "skuCode",price: 200,oldPrice: 300,isCheck: false },
    { label: "热熔胶-白色-GC", prop: "model",price: 200,oldPrice: 300,isCheck: false },
    { label: "测试纯牛奶", prop: "matCode",price: 200,oldPrice: 300,isCheck: false },
    { label: "测试咖啡", prop: "matName",price: 200,oldPrice: 300,isCheck: false },
    { label: "测试平贴板", prop: "unit",price: 200,oldPrice: 300,isCheck: false },
    { label: "穗香暖木封边带", prop: "specs",price: 200,oldPrice: 300,isCheck: false },
    { label: "补仓数量", prop: "planNumUS",price: 200,oldPrice: 300,isCheck: false }
  ])


const orderForm = ref({
  avarImage: null,
  bgImage: null,
})
/**本地缓存获取登录用户信息**/ 
const usersInfo = uni.getStorageSync('userInfo')
/** 获取用户信息 **/   
const getUserData = async ()=>{
  const { data: res } = await uni.$http.get('/getUserInfo',{ id: usersInfo.id })
  orderForm.value = res.data
  const avarArr = JSON.parse(res.data.avarImage) 
  const bgArr = JSON.parse(res.data.bgImage) 
  orderForm.value.avarImage = avarArr[0].url
  orderForm.value.bgImage = bgArr[0].url
}

// tab 选项区
const currentStatus = ref(0)
// const navList = (['笔记', '收藏', '赞过'])
const handleNavChange = (e)=> {
  if(currentStatus.value != e.currentIndex) {
    currentStatus.value = e.currentIndex
  }
}
// 设置 -- 弹出
const showRightRef = ref(null)
const showOpenDrawer = ()=>{
  showRightRef.value.open()
}
const settingData = ref([
  { title: '账号信息',link:'navigateTo', to: '/subpage/userInfo/userInfo', icons: {color: '#000',size: '22',type: 'contact'} },
  { title: '登录',link:'navigateTo', to: '/pages/login/login', icons: {color: '#000',size: '22',type: 'personadd-filled'} },
  { title: '注册',link:'navigateTo', to: '/pages/register/register', icons: {color: '#000',size: '22',type: 'personadd'} },
  { title: '退出登录',link:'navigateTo', to: '/pages/login/login', icons: {color: '#000',size: '22',type: 'personadd'} }
])
const handleClickItem = (item)=>{
  if(item.title === '退出登录' || item.title === '登录'){
    uni.removeStorageSync('userInfo')
  }
}


getUserData()

</script>

<style lang="scss">
.my-content {
  width: 100%;
  .my-header {
    height: 230px;
    color: #fff;
    background-color: #172367;
    .avatar-main {
      height: 80%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center; /* 垂直居中 */
    }
    .avatar-bg-img{
      position: absolute;
      width: 100%;
      height: 230px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      filter: blur(3px);
      z-index: -1;
    }
    .avatar-title {
      .title-one {
        font-size: 18px;
        font-family: Impact, Charcoal, sans-serif;
        margin: 5px auto;
      }
    }
    .avatar-info {
      text-align: center;
      font-size: 14px;
      height: 100px;
    }
    
  }
/* crad内容 */ 
.my-card {
  .card-content {
    width: 100%;
    margin-bottom: 150px;
    /** 卡片内容一 **/ 
    .card-one {  
      .part-one {
        width: 100%;
        height: 100%; 
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        
        .part-one-img {
           height: 100px;
         }
      }
      .part-two{
        // line-height: 2;
        .del{
          text-align: right;
          padding-bottom: 10px;
        }
        .title{
          font-size: 16px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          width: 100%;
        }
        .price {
          position: absolute;
          bottom: 0;
        }
        .yj-price {
          text-decoration: line-through; // 加横线
        }
        .num-edit {
          float: right;
        }
      }
    }
    /** 卡片内容二 **/
    .card-two {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding-top: 10px;
      button {
        margin-right: 5px;
      }
    }
  }
}

}

</style>
